<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ include file="/WEB-INF/jsp/common/_includes.jsp"%>
<jsp:include page="/WEB-INF/jsp/common/_head.jsp"></jsp:include>
<link rel="stylesheet"
	href="/static/vendor/upload/css/jquery.fileupload.css" type="text/css" />
<div class="ui grid">
	<div class="row">
		<div class="column">
			<div class="ui two column grid">
				<div class="three wide column">
					<jsp:include page="/WEB-INF/jsp/common/_sidebar.jsp">
						<jsp:param name="index" value="41" />
					</jsp:include>
				</div>
				<div id="container" class="thirteen wide column">
					<div class="alert alert-success w200 center-block text-center "
						style="display: none;" role="alert"></div>
					<ol class="breadcrumb">
						<li><a href="/">后台管理</a></li>
						<li><a href="/user">用户管理</a></li>
						<li class="active">录入用户</li>
					</ol>
					<form class="form-horizontal" id="addForm" method="post"
						action="/user/addUser">
						<input type="hidden" id="js_titleImg" name="avatarUrl">
					 <div class="form-group">
							<label for="name" class="col-sm-2 control-label">用户头像 地址</label>
							<div class="col-sm-5">
								<img id="preview" width="300px" height="170px"
									src="${attachUrl!=null?attachUrl:'http://placehold.it/300x170'}">
							</div>
							<div class="col-sm-2">
								<span class="btn btn-success btn-block fileinput-button">
									<i class="glyphicon glyphicon-plus"></i> <span>上传图片</span> <input
									id="fileupload" type="file" name="attachFile"
									data-url="/img/upload">
								</span>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">注册手机号码</label>
							<div class="col-sm-8 desc">
								<input type="text" class="form-control" id="mobilePhone"
									name="mobilePhone" placeholder="输入注册手机号码">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">注册邮箱</label>
							<div class="col-sm-8 desc">
								<input type="text" class="form-control" id="mail" name="mail"
									placeholder="输入邮箱">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">昵称</label>
							<div class="col-sm-8 desc">
								<input type="text" class="form-control" id="nickName"
									name="nickName" placeholder="输入昵称">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">密码</label>
							<div class="col-sm-8 desc">
								<input type="text" class="form-control" id="password"
									name="password" placeholder="请输入汉字或数字组成的密码">
							</div>   
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">性别</label>
							<div class="col-sm-8 desc">
								<input type="radio"  style="width: 30px;"     id="gender"
								value="1"	name="gender" placeholder="输入内容标题">男&nbsp;&nbsp;&nbsp;
								<input type="radio"     id="gender"
								value="0"	name="gender" placeholder="输入内容标题">女
							</div>
						</div>  
						
						 
						<div class="form-group" id="js_submit">
							<div class="col-sm-offset-3 col-sm-2">
								<button type="submit" class="btn btn-success">提交</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
<jsp:include page="/WEB-INF/jsp/common/_foot.jsp"></jsp:include>
<script src="/static/vendor/jquery.validate/jquery.validate.js"></script>
<script src="/static/vendor/upload/js/vendor/jquery.ui.widget.js"></script>
<script src="/static/vendor/upload/js/jquery.iframe-transport.js"></script>
<script src="/static/vendor/upload/js/jquery.fileupload.js"></script>
<script src="../../../resources/ueditor/ueditor.config.js"></script>
<script src="../../../resources/ueditor/ueditor.all.js"></script>

<!-- 实例化编辑器 -->
<script type="text/javascript">
	window.UEDITOR_HOME_URL = "/static/vendor/ueditor/";
	var ue = UE.getEditor('myeditor');
	$(function() {
		$("#addForm").validate({    
			rules : {
				mobilePhone : {required:true, remote:"/user/phone"},
				mail : {required:true, remote:"/user/phone"},
				userName: 'required',
				nickName: 'required',
				password: 'required',
				gender: 'required'
					   
			},
			messages : {
				mobilePhone : {
					required : "请输入手机号码",
						remote:"手机号码已注册过"
				},  
				mail : {
					required : "请输入邮箱",
					remote:"邮箱已注册过"
				},
				userName : {   
					required : "请输入用户名"
				},
				nickName : {
					required : "请输入昵称"
				},
				password : {
					required : "请输入密码"
				},
				gender : {
					required : "请输入性别"
				}
			}
		});
		
	    // 初始化上传组件
	    $('#fileupload').fileupload({
	        dataType : 'json',
	        done : function(e, data) {
	            if (data.result.status == 'ok') {
	             
	            	 $('#js_titleImg').val(data.result.url);
	        		 $('#preview').attr('src', data.result.url);
	            }
	        }
	    });
	});
</script>

<script type="text/javascript">
    $(function(){
        $('#mobilePhone').validate({
            rules: {
                email:{
                    required:true,
                    email:true,
                    remote:{
                        url:'user/pnone',
                        type:'get'
                    },
                },
                password:{
                    required:true,
                    minlength:6,
                },
                repassword:{
                    required:true,
                    equalTo:password,
                    minlength:6,
                }
            },
            messages:{
                email:{
                    required:'邮箱地址不能为空',
                    email:'邮箱格式错误',
                    remote:'该邮箱已经被注册 <a href="/default/bind">绑定账号</a>'
                },
                password:{
                    required:'登录密码不能为空',
                    minlength:'密码长度不能少于6个字符'
                },
                repassword:{
                    required:'确认密码不能为空',
                    minlength:'密码长度不能少于6个字符',
                    equalTo:'确认密码与输入的密码不一致'
                }
            },
            errorElement:'em',
            errorPlacement: function(error, element) {
                error.appendTo( element.parent().find('.back'));       
                
            },
        });
        
        $("#complete .submit span").click(function(){
            $("#complete form").submit();	
        })
    });
</script>


   